<template>
  <div class="app">
    <Head>
      <div class="head" slot="left">
        <span>ele.me</span>
        <router-link tag="span" to="login" v-if="$store.state.log == ''"
          ><span>登录|注册</span></router-link
        >
        <router-link tag="svg" to="Mylogin" id="user" v-else
          ><svg viewBox="0 0 28 33">
            <path
              fill-rule="evenodd"
              d="M20.798 19.289c2.636-2.002 4.215-5.091 4.215-8.437 0-5.886-4.845-10.647-10.808-10.647S3.397 4.966 3.397 10.852c0 3.345 1.578 6.433 4.212 8.435l.264-2.678C4.358 18.32 1.591 21.403.168 25.187l1.478.556v-1.579c-1.485.73-1.485.73-1.501 1.079-.054.188-.054.188-.069.278a2.58 2.58 0 0 0-.026.229 9.112 9.112 0 0 0-.019.4c-.008.265-.014.617-.018 1.039-.005.511-.006 1.037-.006 1.451v.027c-.004 1.732 1.41 3.129 3.154 3.129h22.082a3.18 3.18 0 0 0 3.172-3.153l.011-1.305.008-.897.003-.296.001-.083v-.022-.006-.001l.002-.278-.093-.262c-1.385-3.918-4.203-7.122-7.812-8.88l.263 2.678zm-1.911-2.516l-2.045 1.553 2.309 1.125c2.856 1.392 5.106 3.949 6.218 7.093l-.09-.54V26.033l-.001.083-.003.296-.008.897-.011 1.305c0 .01-.011.021-.013.021H3.161c-.007 0 .005.011.005.032v-.031c0-.404.001-.92.006-1.418.004-.4.01-.732.017-.969.004-.121.008-.212.012-.262l-.006.043c-.009.06-.009.06-.058.229-.01.336-.01.336-1.49 1.063H2.74l.385-1.024c1.141-3.035 3.35-5.495 6.131-6.849l2.309-1.124-2.045-1.554c-1.859-1.412-2.964-3.576-2.964-5.92 0-4.129 3.418-7.488 7.649-7.488s7.649 3.359 7.649 7.488c0 2.344-1.106 4.509-2.966 5.921z"
              class="path1"
            ></path></svg
        ></router-link>
      </div>
      <div class="poa" slot="center">
        <p class="dw">
          <span>当前定位城市</span><span>定位不准时,请在城市列表选择</span>
        </p>
        <p class="ab">
          <span @click="q()">{{ dq }}</span>
        </p>
      </div>
    </Head>
    <main>
      <div class="hot">
        <p class="hot-p">热门城市</p>
        <ul class="hot-ul">
          <li
            v-for="(item, index) in hot"
            @click="li(item.name, item)"
            :key="index"
          >
            {{ item.name }}
          </li>
        </ul>
      </div>
      <div class="city-xq" v-for="(i, index) in arrnew" :key="index">
        <p class="xq">{{ i.k }}<span>(按字母排序)</span></p>
        <div class="cli">
          <span
            v-for="(e, index) in i.list"
            @click="clixq(e.name, e)"
            :key="index"
            >{{ e.name }}</span
          >
        </div>
      </div>
    </main>
  </div>
</template>
<script>
import Head from "@/components/Cityheader.vue";
import { getCityAll, gethotCity, getdq } from "@/api/index.js";
export default {
  components: {
    Head,
  },
  data() {
    return {
      hot: "",
      green: "",
      gr: "",
      k: "",
      arr: [],
      arrnew: [],
      tite: "城市",
      dq: "",
      h: "",
      id: "",
      o: "",
      p: "",
    };
  },
  methods: {
    q() {
      this.$router.push({
        path: "/Citysearch",
        query: { d: this.dq, id: this.p },
      });
    },
    clixq(u, e) {
      this.$router.push({ path: "/Citysearch", query: { m: u, id: e.id } });
    },
    li(i, item) {
      this.$router.push({ path: "/Citysearch", query: { h: i, id: item.id } });
    },
  },
  async mounted() {
    // 当前城市
    var t = await getdq();
    this.dq = t.data.name;
    this.p = t.data.id;

    //全部城市
    var h = await getCityAll();
    this.green = h.data;
    var arr = [];
    for (var key in this.green) {
      arr.push({ k: key, list: this.green[key] });
    }
    for (var i = 0; i < arr.length; i++) {
      this.h = arr[i].list;
      for (var j = 0; j < arr.length - 1; j++) {
        if (arr[j].k > arr[j + 1].k) {
          var o = arr[j];
          arr[j] = arr[j + 1];
          arr[j + 1] = o;
        }
      }
    }
    this.arrnew = arr;

    //热门城市
    var hot = await gethotCity();
    this.hot = hot.data;
    this.hot.forEach((item) => {
      this.o = item.id;
    });
  },
  computed: {},
};
</script>
<style lang="css" scoped>
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
a {
  text-decoration: none;
}
ul,
li {
  list-style: none;
}

a,
input,
button {
  -webkit-tap-highlight-color: transparent;
  /* 移除点击产生的高亮效果：透明色 */
}
input,
button {
  -webkit-appearance: none;
  /* 在ios中加入这句能修改button和input的宽高 */
}
img,
a {
  -webkit-touch-callout: none;
  /* 禁止长按弹出菜单 */
}
img {
  vertical-align: middle;
}
html,
body,
.app {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
}
header {
  width: 100%;
  height: 10rem;
  display: flex;
  flex-direction: column;
}
.head {
  width: 100%;
  height: 3rem;
  display: flex;
  justify-content: space-between;
  background: #2f90e7;
  padding: 0px 10px 0px 10px;
  align-items: center;
}
.head span {
  color: #e7ffff;
}
.poa {
  width: 100%;
  height: 5rem;
  display: flex;
  /* justify-content: space-between; */
  flex-direction: column;
}
.dw {
  width: 100%;
  height: 50%;
  border-bottom: 1px solid #cccc;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0px 10px 0px 10px;
}
.dw span {
  font-size: 13px;
  color: #cccc;
}
.ab {
  display: flex;
  width: 100%;
  height: 50%;
  justify-content: space-between;
  align-items: center;
  padding: 0px 10px 0px 10px;
}
.ab span {
  color: #2f90e7;
}
.hot {
  height: 8rem;
  display: flex;
  flex-direction: column;
  background: #ffff;
}
.hot-p {
  width: 100%;
  height: 2rem;
  font-size: 14px;
  color: #cccc;
  /* display: flex; */
  justify-content: space-between;
  align-items: center;
  padding-left: 0.5rem;
}
.hot-ul {
  height: 6rem;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  flex-direction: column;
  align-content: center;
}
.hot-ul li {
  width: 25%;
  height: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #2f90e7;
  border: 1px solid #e4e4e4;
}
main {
  flex: 1;
  overflow-y: auto;
}
.city-xq {
  height: auto;
  background: #ffff;
  margin-top: 50px;
}
.xq {
  height: 2rem;
  border-bottom: 1px solid #cccc;
  display: flex;
  align-items: center;
  font-size: 14px;
  padding-left: 20px;
}
.cli {
  display: flex;
  flex-wrap: wrap;
  display: flex;
  align-content: center;
  box-sizing: border-box;
}
.cli span {
  width: 5.85rem;
  height: 50px;
  border: 1px solid #e4e4e4;
  overflow: hidden;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 11px;
  white-space: nowrap;
}
.cs {
  position: fixed;
  top: 0px;
  font-size: 50px;
  color: red;
}
#user {
  width: 1.5rem;
  height: 1.5rem;
}
</style>
